<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>找回密码--重置密码</title>
	<!-- 引入Pacifico字体（Google Fonts） -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<style>
		/* 全局样式重置与基础设置 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			/* 黑白水墨风背景 */
			background-color: #f8f8f8;
			background-image:
					radial-gradient(#333 0.5px, transparent 0.5px),
					radial-gradient(#333 0.5px, #f8f8f8 0.5px);
			background-size: 20px 20px;
			background-position: 0 0, 10px 10px;
			background-opacity: 0.1;
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			/* 水墨纹理叠加 */
			background-image:
					url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23333' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"),
					radial-gradient(#333 0.5px, transparent 0.5px),
					radial-gradient(#333 0.5px, #f8f8f8 0.5px);
		}

		/* 表单容器：水墨科技风卡片效果 */
		.reset-container {
			width: 35%;
			min-width: 320px;
			padding: 40px 30px;
			background-color: #ffffff;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 8px;
			/* 科技感阴影：模拟水墨画的晕染效果 */
			box-shadow:
					0 8px 30px rgba(0, 0, 0, 0.08),
					0 0 1px rgba(0, 0, 0, 0.2) inset;
			position: relative;
			overflow: hidden;
		}

		/* 容器顶部装饰线 - 模拟水墨画的笔触 */
		.reset-container::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: linear-gradient(90deg, transparent 0%, #333 50%, transparent 100%);
		}

		/* 标题样式 */
		.reset-container h3 {
			font-family: 'Pacifico', cursive;
			color: #333333;
			font-size: 26px;
			text-align: center;
			margin-bottom: 30px;
			letter-spacing: 1px;
			position: relative;
		}

		.reset-container h3::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 1px;
			background-color: rgba(0, 0, 0, 0.2);
		}

		/* 表单样式 */
		.reset-form {
			display: flex;
			flex-direction: column;
			gap: 18px;
			align-items: center;
			margin-top: 20px;
		}

		/* 输入框样式：水墨科技风 */
		.reset-form input[type="text"] {
			width: 260px;
			height: 42px;
			padding: 0 15px;
			background-color: rgba(255, 255, 255, 0.8);
			border: 1px solid rgba(0, 0, 0, 0.15);
			border-radius: 4px;
			font-family: 'Pacifico', cursive;
			color: #333333;
			font-size: 16px;
			transition: all 0.3s ease;
		}

		.reset-form input[type="text"]:focus {
			outline: none;
			border-color: #333333;
			box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
		}

		/* 错误信息样式 */
		.error-tip {
			/*display: #(errorInfo ? 'flex':'none');*/
			font-family: 'Pacifico', cursive;
			color: #8B0000; /* 暗红色，类似墨色 */
			font-size: 14px;
			margin-top: -10px;
			margin-bottom: 5px;
			text-align: center;
			animation: shake 0.5s ease #(errorInfo ? 'running':'paused');
		}

		/* 密码提示信息样式 */
		.password-tip {
			display: #(passwordLengthError ? 'flex':'none');
			font-family: 'Pacifico', cursive;
			color: #8B0000;
			font-size: 14px;
			margin-top: -10px;
			margin-bottom: 5px;
			text-align: center;
			animation: shake 0.5s ease #(passwordLengthError ? 'running':'paused');
		}

		/* 按钮样式：水墨科技风 */
		.reset-form input[type="submit"] {
			width: 260px;
			height: 45px;
			background-color: #333333;
			color: #ffffff;
			border: none;
			border-radius: 4px;
			font-family: 'Pacifico', cursive;
			font-size: 18px;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}

		.reset-form input[type="submit"]::after {
			content: "";
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
			transition: all 0.6s ease;
		}

		.reset-form input[type="submit"]:hover {
			background-color: #1a1a1a;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}

		.reset-form input[type="submit"]:hover::after {
			left: 100%;
		}

		.reset-form input[type="submit"]:active {
			transform: translateY(0);
		}

		/* 错误信息抖动动画 */
		@keyframes shake {
			0%, 100% { transform: translateX(0); }
			20% { transform: translateX(-3px); }
			40% { transform: translateX(3px); }
			60% { transform: translateX(-2px); }
			80% { transform: translateX(2px); }
		}

		/* 响应式适配 */
		@media (max-width: 768px) {
			.reset-container {
				width: 85%;
				padding: 30px 20px;
			}
			.reset-form input[type="text"],
			.reset-form input[type="submit"] {
				width: 220px;
			}
		}
	</style>
</head>
<body>
<!-- 表单容器 -->
<div class="reset-container">
	<h3>找回密码--重置密码</h3>
	<form action="/admin/execu_forghtPwd" method="post" class="reset-form">
		<input type="text" placeholder="验证码" name="code" />
		#if(codeError)
		<span class="error-tip">验证码不正确</span>
		#end

		<input type="text" placeholder="请输入新密码" name="password" />
		<span class="password-tip">密码的长度不少于六位</span>

		<input type="submit" value="修改" />
	</form>
</div>
</body>
</html>
